<template>
  <basic-container>
    <avue-crud
      :data="data"
      :page.sync="page"
      :option="option"
      @row-del="rowDel"
      v-model="obj"
      ref="crud"
      @row-save="rowSave"
      :before-open="beforeOpen"
      @on-load="onlists"
      @row-update="rowUpdate"
      :table-loading="orderLoading"
      @search-change="searchChange"
      @toggleSelection="toggleSelection"
      @selection-change="selectionChange"
    >
      <template slot-scope="scope" slot="menu">
        <el-button type="text" @click.stop="onrowEdits(scope.row,scope.index)">编辑</el-button>
      </template>
      <template slot-scope="{type,disabled}" slot="pitcure_listForm">
          <Upload ref="upload" list-type="picture-card" :multiple="true" @Upload="Upload" :fileList="fileList"></Upload>
      </template>
      <template slot-scope="{type,disabled}" slot="script_idsForm">
        <avue-select multiple v-model="script_ids" placeholder="请选择内容" :dic="script_idsDic"></avue-select>
      </template>
      <template slot="menuLeft" slot-scope="{size}">
        <el-button type="danger" :size="size" @click="toggleSelection()">多选删除（ 已选{{selectLen}} ）</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {dmList,dmadduserList,dmupdateuserList,dmgetList,dmdeleteuserList} from "@/api/dm";
import Upload from '../../components/upload'
import {jubendmList} from '@/api/scriptDetail'
const DIC = {
  VAILD: [{
    label: '男',
    value: '1'
  }, {
    label: '女',
    value: '0'
  }],
  status: [
    {
      label: '工作中',
      value: 1
    },
    {
      label: '发呆中',
      value: 2
    },
    {
      label: '休息中',
      value: 3
    }
  ],
  constellation: [
    {
      label: '白羊座',
      value: 1
    },
    {
      label: '金牛座',
      value: 2
    },
    {
      label: '双子座',
      value: 3
    },
    {
      label: '巨蟹座',
      value: 4
    },
    {
      label: '狮子座',
      value: 5
    },
    {
      label: '处女座',
      value: 6
    },
    {
      label: '天秤座',
      value: 7
    },
    {
      label: '天蝎座',
      value: 8
    },
    {
      label: '射手座',
      value: 9
    },
    {
      label: '摩羯座',
      value: 10
    },
    {
      label: '水瓶座',
      value: 11
    },
    {
      label: '双鱼座',
      value: 12
    },
  ],
}
export default {
  components:{Upload},
  data() {
    return {
      data: [],
      script_ids: [],
      script_idsDic: [],
      obj:{
        pitcure_ids: [],
      },
      query:{},
      fileList: [],
      selectLen: 0,
      play_count: null,
      constellation: null,
      like_count: null,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        "pageSizes": [
          10,
          20,
          30,
          40,
          50,
          100
        ],
        "background": true
      },
      orderLoading: false,
      option:{
        align:'center',
        menuAlign:'center',
        menuWidth:400,
        selection: true,
        tip: false,
        editBtn: false,
        viewBtn:false,
        menuTitle:'操作',
        addTitle: '保存',
        editTitle: '编辑用户',
        searchBtnText:'搜索',
        emptyBtnText:'清空',
        addBtnText:'新增用户',
        delBtnText:'删除',
        delBtnIcon:'null',
        updateBtnText:'保存',
        saveBtnText:'保存',
        cancelBtnText:'取消',
        column:[
          {
            label:'昵称',
            prop:'nickname',
            search:true,
          },
          {
            label:'性别',
            prop:'gender_str',
            type: "select",
            dicData: DIC.VAILD,
            rules: [{
              required: true,
              message: "请选择性别",
              trigger: "blur"
            }],
          },
          {
            label:'状态',
            prop:'status',
            type: "select",
            hide: true,
            dicData: DIC.status,
          },
          {
            label:'星座',
            prop:'constellation',
            type: "select",
            hide:true,
            dicData: DIC.constellation,
          },
          {
            label:'剧本列表',
            prop:'script_ids',
            hide:true,
            props: {
              label: 'name',
              value: 'id'
            },
          },
          {
            label:'加入时间',
            prop:'join_time',
            type: 'date',
            valueFormat: 'yyyy-MM-dd',
          },
          {
            label:'游玩次数',
            hide:true,
            prop:'play_count',
            type: 'number',
          },
          {
            label:'点赞数',
            hide:true,
            prop:'like_count',
            type: 'number'
          },
          {
            label:'生活照',
            hide:true,
            width: 600,
            prop:'pitcure_list',
          },
        ]
      },
    };
  },
  mounted() {
      this.script_List()
  },
  methods: {
    //更新
    onlists(page,params = {}) {
      this.orderLoading = true;
      dmList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
        this.orderLoading = false;
        this.data = res.data.data.list
        this.page.total = res.data.data.total
      })
    },
    //搜索
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage=1
      this.onlists(this.page, params);
      done();
    },
    //新增
    rowSave(row, done, loading) {
      loading()
      if(this.fileList.length === 0) return this.$message.error('请上传剧本图片');
      row.pitcure_ids = this.fileList.map(v=>{return v.id}).join(',')
      row.script_ids = this.script_ids.join(',')
      delete row.pitcure_list
      dmadduserList(row).then(() => {
        loading();
        this.onlists(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done()
      });
    },
    //更新
    rowUpdate(row, index, loading) {
      loading()
      row.pitcure_ids = this.fileList.map(v=>{return v.id}).join(',')
      row.script_ids = this.script_ids.join(',')
      delete row.pitcure_list
      dmupdateuserList(row.id,row).then(() => {
        loading();
        this.onlists(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      });
    },
    // 删除
    rowDel(row,index,ids) {
      const idList = row.id || ids
      if(idList){
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return dmdeleteuserList(idList);
          })
          .then(() => {
            this.onlists(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      }
    },
    //获取详情
    onrowEdits(row, index){
      this.script_ids = []
      dmgetList(row.id).then((res) => {
        this.script_ids = res.data.data.script_list.map(v=>{return v.script_id})
        this.fileList = res.data.data.pitcure_list
        this.obj.pitcure_list = res.data.data.pitcure_list.map(v=>{return v.pitcure_url})
        this.obj = res.data.data
        this.constellation = res.data.data.constellation
        this.play_count = res.data.data.play_count
        row.like_count = res.data.data.like_count
        this.$refs.crud.rowEdit(row, index)
      })
    },
    //获取剧本列表
    script_List(){
      jubendmList({no_page:true}).then(res=>{
        this.script_idsDic = res.data.data.map(v=>{return {label:v.name,value:v.id}})
      })
    },
    Upload(data){
      this.fileList = data
    },
    //弹窗打开
    beforeOpen(done,type){
      this.obj.constellation = this.constellation
      this.obj.play_count = this.play_count
      if(type === 'add') this.script_ids = []
      done()
    },
    //多选删除
    toggleSelection(){
      this.selectLen = this.$refs.crud.selectLen
      const ids = this.$refs.crud.tableSelect.map(v=>{return v.id}).join(',')
      this.rowDel('','',ids)
    },
    selectionChange(){
      this.selectLen = this.$refs.crud.selectLen
    }
  }
}
</script>

<style scoped>
.avue-form__menu--center{
  text-align: right;
}
/deep/.upload-demo{
  width: 1000px;
}
</style>
